<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../css/index.css">
        <title>Syba - Administration</title>
        <script type="text/javascript" src="../scripts_js/XMLHttpRequest.js"></script>
        <script type="text/javascript" src="../scripts_js/fonctions.js"></script>
    </head>
    <body onload="verification_session();
            recupererListeEleves();
            cacher();">
        <header>
            <a href="ens_gestion_eleves.html">
                <img id="home_direction" src="../images/home.png" />
            </a>
            <h1 id="title"> Gestion des Elèves </h1>
            <div id="connecté">
                Bienvenue   <b id="aff_pseudo2"></b> <input type="button" id="b_deconnexion" value="deconnexion " onclick="deconnexion();"/>
            </div>
        </header>

        <nav>

        </nav>
        <div style="clear:both;"></div>
        <article>


        </article>
        <footer>
            <script type="text/javascript">
        afficherfooter();
            </script>
        </footer>
        <script type="text/javascript">

            function cacher() {
                if (readCookie("Syba_connexion") !== null) {

                    document.getElementById('aff_pseudo2').innerHTML = readCookie("Syba_connexion");

                }
                else {
                    document.getElementById('connecté').setAttribute('style', 'display:none;');
                }
            }
            //Deconnexion de l'utilisateur
            function deconnexion() {
                eraseCookie("Syba_connexion");
                eraseCookie("Syba_id_personne");
                window.location = "../index.html";

            }


            //Fichier xml contenant la liste des élèves
            function recupererListeEleves() {
                var listeDesEleves;

                var xhr = getXMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        //alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                        var docXML = xhr.responseText;
                        listeDesEleves = stringToXML(docXML);
                        construireTableauEleves(listeDesEleves);
                    }
                };


                xhr.open("POST", "../scripts_php/eleve_recuperer_tous_mysql.php", false);
                xhr.send(null);
            }


            //Affichage des élèves
            function construireTableauEleves(xml) {

                var listeDEleves = xml.getElementsByTagName("eleve");
                var body = document.getElementsByTagName('article')[0];



                for (var i = 0; i < listeDEleves.length; i++) {


                    var div = document.createElement("div");
                    div.setAttribute('style', 'width:20%; height:' + window.innerHeight / 3.5 + '; margin-left: 4%; margin-bottom: 2%;display: inline-block;');
                    var div1 = div.appendChild(document.createElement("div"));
                    div1.setAttribute('id', 'mosaic');
                    div1.setAttribute('style', 'float: left;border: 5px black solid;  background-image:url(../imagesProfils/' + addslashes(listeDEleves[i].getElementsByTagName("image")[0].childNodes[0].nodeValue) + ') ; background-position:center; background-repeat:no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;width:70%; height:' + window.innerHeight / 4 + 'px; display: inline-block;');


                    var div2 = div1.appendChild(document.createElement("div"));
                    div2.setAttribute('style', 'width: 100%; height: 15%;  background-color: black; opacity:0.5; color:white; text-align:center; font-size: ' + window.innerHeight / 32 + 'px;font-weight:bold;');
                    div2.appendChild(document.createTextNode(listeDEleves[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue));

                    var div3 = div1.appendChild(document.createElement("div"));
                    div3.setAttribute('style', 'width: 70%; height: 60%;position:static; display: inline-block;');

                    var div4 = div1.appendChild(document.createElement("div"));
                    div4.setAttribute('style', 'width: 30%; height: 60%;position:static; display: inline-block;');

                    var div5 = div1.appendChild(document.createElement("div"));
                    div5.setAttribute('style', 'width: 100%; height: 25%;background-color: white; opacity:0.7; color: black; text-align: center; font-size: ' + window.innerHeight / 39 + 'px; font-weight:bold; word-wrap: break-word;');
                    div5.appendChild(document.createTextNode(listeDEleves[i].getElementsByTagName("prenom")[0].childNodes[0].nodeValue));
                    body.appendChild(div);


                }

            }



        </script>

    </body>
</html>